import React, { FC, useEffect, useRef, useState } from 'react';
import { BankOutView, BankBtnList, BankTable } from '../components';
import { InformationModal } from './InformationModal';
import { columns, data } from './dataSource';
import './index.css'

const InformationMaintenance: FC = (props) => {
  const [searchList, setSearchList] = useState([]);
  const [modalType, setModalType] = useState('');
  const modalRefs = useRef();
  const bankTableRefs = useRef();

  useEffect(() => {
    const fetchListArr = ['serverDate', 'currencyList'];
    Promise.all([]).then((result: any) => {
      const _res = fetchListArr.map((k, i) => ({ [`${k}`]: result[i] }))
      // 获取对应数据
      setSearchList(_res as never[]);
    });
  }, []);

  const handleClickOperateBtn = (type: string) => {
    setModalType(type);
    (modalRefs.current as any).setIsModalOpen(true);
    const bankItem = bankTableRefs.current;
    switch (type) {
      case '新增':
        console.log(bankItem, 'bankItem')
        // 新增逻辑编辑
        console.log(type);
        break;
      case "编辑":
        console.log(bankItem, 'bankItem')
        // 编辑逻辑编辑
        console.log(type);
        break;
      case "删除":
        console.log(bankItem, 'bankItem')
        // 删除逻辑编辑
        console.log(type);
        break;
      case "查看详情":
        console.log(bankItem, 'bankItem')
        // 查看详情逻辑编辑
        console.log(type);
        break;
      case "模版下载":
        console.log(bankItem, 'bankItem')
        // 查看详情逻辑编辑
        console.log(type);
        break;
      case "文件导入":
        console.log(bankItem, 'bankItem')
        // 查看详情逻辑编辑
        console.log(type);
        break;
      default:
        return;
    }
  }

  return (
    <BankOutView title="公告信息管理">
      <div className='operate-btn-list'>
        <BankBtnList
          btnList={["新增", "编辑", "删除", "查看详情", "模版下载", "文件导入"]}
          btnClickCallback={(type) => handleClickOperateBtn(type)}
        />
      </div>
      <div className='table-list'>
        <BankTable
          ref={bankTableRefs}
          tableType={'radio'}
          columns={columns}
          data={data}
          paginationInfo={{ total: 120 }}
        />
      </div>
      <InformationModal ref={modalRefs} type={modalType} />
    </BankOutView >
  )
}

export default InformationMaintenance;